<template>
  <view class="packetBg h-48 flex flex-col">
    <view class="text-white text-center mt-4">账户余额(金币)</view>
    <view class="text-white text-5xl text-center">0</view>
    <view class="mt-1 flex justify-center">
      <text class="px-2 py-1 border border-solid border-white rounded-2xl text-sm text-white">营销币充值</text>
    </view>

    <view class="flex h-16 mt-auto">
      <view class="flex-1">
        <view class="text-center text-ls text-white">已发金币总数</view>
        <view class="text-center text-lg text-white">2.00</view>
      </view>
      <view class="flex-1">
        <view class="text-center text-ls text-white">已发红包个数</view>
        <view class="text-center text-lg text-white">200.00</view>
      </view>
    </view>
  </view>

  <view>
    <List>
      <view class="border-bottom" v-for="item in 10">
        <view class="h-10 px-4 py-2 flex flex-col justify-between">
          <view class="text-sm">红包金额 200(元)</view>
          <view class="text-xs text-zinc-400">2024-07-05 09:55:29</view>
        </view>
      </view>
    </List>


  </view>

  <view class="packetBtn flex items-center justify-center w-36 h-10 bg-indigo-500 rounded-3xl text-white fixed bottom-4" @click="jumpCreate">发红包</view>


</template>

<script setup lang="ts">
import List from './components/list.vue'
</script>

<style scoped lang="scss">
.packetBg {
  background: url("@/static/image/homeBg.png") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.packetBtn {
  left: 50%;
  transform: translateX(-50%);
}
</style>
